<app-common-header [title]="'myAccount.setting.personal_informations.billingAddressFunction.title'|translate"></app-common-header>
<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="12" class="address-item">
        <ion-label position="fixed">
          {{'myAccount.setting.personal_informations.billingAddressFunction.receiver'|translate}}
        </ion-label>
        {{appBillingAddress.receiver}}
      </ion-col>
      <ion-col size="12" class="address-item">
        <ion-label position="fixed">
          {{'myAccount.setting.personal_informations.billingAddressFunction.mobileNumber'|translate}}
        </ion-label>
        <ion-input clearInput [(ngModel)]="appBillingAddress.mobileNumber" placeholder="{{'myAccount.setting.personal_informations.billingAddressFunction.enter'|translate}}"></ion-input>
      </ion-col>
      <ion-col size="12" class="address-item">
          <ion-label>{{'myAccount.setting.personal_informations.billingAddressFunction.country'|translate}}</ion-label>
          <ion-select interface="alert" 
                      [(ngModel)]="appBillingAddress.country"
                      selectedText="{{appBillingAddress.selectedCountry}}"
                      placeholder="{{'myAccount.setting.personal_informations.billingAddressFunction.select'|translate}}"
                      okText="{{'myAccount.setting.personal_informations.billingAddressFunction.ok'|translate}}" 
                      cancelText="{{'myAccount.setting.personal_informations.billingAddressFunction.cancel'|translate}}"
                      (click)="getCountryList()"
                      (ionChange)="selectedCountry()">
              <ion-select-option value="{{item.id}}" *ngFor="let item of countryList">{{item.area}}</ion-select-option>
          </ion-select>
        </ion-col>
      <ion-col size="12" class="address-item">
        <ion-label>{{'myAccount.setting.personal_informations.billingAddressFunction.state'|translate}}</ion-label>
        <ion-select interface="alert" 
                    [(ngModel)]="appBillingAddress.state"
                    selectedText="{{appBillingAddress.selectedState}}"
                    placeholder="{{'myAccount.setting.personal_informations.billingAddressFunction.select'|translate}}" 
                    okText="{{'myAccount.setting.personal_informations.billingAddressFunction.ok'|translate}}" 
                    cancelText="{{'myAccount.setting.personal_informations.billingAddressFunction.cancel'|translate}}"
                    (click)="getStateList()"
                    (ionChange)="selectedState()">
            <ion-select-option value="{{item.id}}" *ngFor="let item of stateList">{{item.area}}</ion-select-option>
        </ion-select>
      </ion-col>
      <ion-col size="12" class="address-item">
        <ion-label>{{'myAccount.setting.personal_informations.billingAddressFunction.city'|translate}}</ion-label>
        <ion-select interface="alert" 
                    [(ngModel)]="appBillingAddress.city"
                    selectedText="{{appBillingAddress.selectedCity}}"
                    placeholder="{{'myAccount.setting.personal_informations.billingAddressFunction.select'|translate}}" 
                    okText="{{'myAccount.setting.personal_informations.billingAddressFunction.ok'|translate}}" 
                    cancelText="{{'myAccount.setting.personal_informations.billingAddressFunction.cancel'|translate}}"
                    (click)="getCityList()"
                    (ionChange)="selectedCity()">
          <ion-select-option value="{{item.id}}" *ngFor="let item of cityList">{{item.area}}</ion-select-option>
        </ion-select>
      </ion-col>
      <ion-col size="12" class="address-item">
        <ion-label>{{'myAccount.setting.personal_informations.billingAddressFunction.zipcode'|translate}}</ion-label>
        <ion-select placeholder="{{'myAccount.setting.personal_informations.billingAddressFunction.select'|translate}}" 
                    interface="alert" [(ngModel)]="appBillingAddress.postalCode"
                    okText="{{'myAccount.setting.personal_informations.billingAddressFunction.ok'|translate}}" 
                    cancelText="{{'myAccount.setting.personal_informations.billingAddressFunction.cancel'|translate}}">
            <ion-select-option value="434324">434324</ion-select-option>
            <ion-select-option value="400123">400123</ion-select-option>
        </ion-select>
      </ion-col>
      <ion-col size="12" class="address-item">
        <ion-label position="fixed">
          {{'myAccount.setting.personal_informations.billingAddressFunction.addressLine1'|translate}}
        </ion-label>
        <ion-input clearInput [(ngModel)]="appBillingAddress.addressLine1" placeholder="{{'myAccount.setting.personal_informations.billingAddressFunction.enter'|translate}}"></ion-input>
      </ion-col>
      <ion-col size="12" class="address-item">
        <ion-label position="fixed">
          {{'myAccount.setting.personal_informations.billingAddressFunction.addressLine2'|translate}}
        </ion-label>
        <ion-input clearInput [(ngModel)]="appBillingAddress.addressLine2" placeholder="{{'myAccount.setting.personal_informations.billingAddressFunction.enter'|translate}}"></ion-input>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12">
        <ion-button expand="full" fill="clear" class="customer-btn" (click)="saveAppBillingAddress()" [disabled]='loading'>
          {{'myAccount.setting.personal_informations.billingAddressFunction.confirm'|translate}}
          <ion-spinner [hidden]="!loading"></ion-spinner>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
